<template>

  <el-drawer
    size="20%"
    :close-on-press-escape="closeOnPressEscape"
    :visible.sync="show"
    :with-header="false">
    <slot />
  </el-drawer>
</template>

<script>

export default {
  name: 'RightPanel',
  data() {
    return {
      closeOnPressEscape: true
    }
  },
  computed: {
    show: {
      get() {
        return this.$store.state.settings.showSettings
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val
        })
      }
    },
    theme() {
      return this.$store.state.settings.theme
    },
  },
}
</script>
